<template>
    <nut-tabs v-model="tab" animated-time="0" sticky :top="0">
        <nut-tab-pane title="全部" pane-key="all">
            <nut-empty
                v-if="orderList.length <= 0"
                image="empty"
                description="暂无订单"
            ></nut-empty>
            <OrderCardCom
                v-for="(order, index) in orderList"
                :key="index"
                :orderInfo="order"
            ></OrderCardCom>
        </nut-tab-pane>
        <nut-tab-pane title="待支付" pane-key="wait_pay">
            <nut-empty
                v-if="pendingPaymentOrderList.length <= 0"
                image="empty"
                description="暂无订单"
            ></nut-empty>
            <OrderCardCom
                v-for="(order, index) in pendingPaymentOrderList"
                :key="index"
                :orderInfo="order"
            ></OrderCardCom>
        </nut-tab-pane>
        <nut-tab-pane title="待收货" pane-key="wait_get">
            <nut-empty
                v-if="pendingShipmentOrderList.length <= 0"
                image="empty"
                description="暂无订单"
            ></nut-empty>
            <OrderCardCom
                v-for="(order, index) in pendingShipmentOrderList"
                :key="index"
                :orderInfo="order"
            ></OrderCardCom>
        </nut-tab-pane>
        <nut-tab-pane title="待评价" pane-key="wait_comment">
            <nut-empty
                v-if="pendingCommentOrderList.length <= 0"
                image="empty"
                description="暂无订单"
            ></nut-empty>
            <OrderCardCom
                v-for="(order, index) in pendingCommentOrderList"
                :key="index"
                :orderInfo="order"
            ></OrderCardCom>
        </nut-tab-pane>
        <nut-tab-pane title="售后" pane-key="after_sale">
            <nut-empty
                v-if="pendingCompletedOrderList.length <= 0"
                image="empty"
                description="暂无订单"
            ></nut-empty>
            <OrderCardCom
                v-for="(order, index) in pendingCompletedOrderList"
                :key="index"
                :orderInfo="order"
            ></OrderCardCom>
        </nut-tab-pane>
    </nut-tabs>
</template>

<script lang="ts" setup>
import Taro from '@tarojs/taro'
import { ref, computed } from 'vue'
import { orderList, OrderStatus } from '@/config/index'
import OrderCardCom from './orderCardCom.vue'

const Instance = Taro.getCurrentInstance()
const urlParams = Instance.router?.params
const tab = ref(urlParams?.tab || 'all')

const pendingPaymentOrderList = computed(() => {
    return orderList.filter((order) => order.status === OrderStatus.PENDING_PAYMENT)
})
const pendingShipmentOrderList = computed(() => {
    return orderList.filter((order) => order.status === OrderStatus.PENDING_SHIPMENT)
})
const pendingCommentOrderList = computed(() => {
    return orderList.filter((order) => order.status === OrderStatus.PENDING_COMMENT)
})
const pendingCompletedOrderList = computed(() => {
    return orderList.filter((order) => order.status === OrderStatus.COMPLETED)
})
// const pendingPaymentOrderList = computed(() => {
//   return orderList.filter(order => order.status === OrderStatus.CANCELLED )
// })
</script>
